import React from "react";
import {createStyles} from "antd-style";
import {Button} from "antd";
import "@/Animation.css"
import userApi from "@/api/UserApi.ts";
import localUtil from "@/utils/LocalUtil.ts";
import {useUserInfoStore} from "@/store/BaseStore.ts";

const useStyles = createStyles(({css, token}) => {
    return {
        container: css`
            display: flex;
            position: fixed;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 1000px;
            height: 500px;
            background-color: rgba(0, 0, 0, .2);
            backdrop-filter: blur(10px) brightness(1.2);
            padding: 40px;
            border-radius: 20px;
            text-shadow: 0 0 4px rgba(0, 0, 0, .4);

            .left {
                display: flex;
                flex-direction: column;
                justify-content: center;
                width: 60%;
                overflow: hidden;
                
                h1 {
                    width: fit-content;
                    font-size: 50px;
                    font-weight: 500;
                    padding: 40px 0;
                    animation-name: text-scroll;
                    animation-fill-mode: forwards;
                    animation-iteration-count: infinite;
                    animation-timing-function: ease-in-out;
                    animation-direction: alternate;
                    animation-duration: 3s;
                    animation-delay: .5s;
                    animation-play-state: running;
                    line-height: 80px;
                    white-space: nowrap;
                    
                    :hover {
                        animation-play-state: paused;
                    }
                }
                
                p {
                    padding: 20px 0;
                    line-height: 1.4;
                }
                
                .buttons {
                    padding: 20px 0;
                    display: flex;
                    gap: 20px;
                }
            }
            
            .right {
                display: flex;
                padding: 50px 0 50px 50px;
                img {
                    object-fit: contain;
                }
            }
        `
    }
})

interface IMainContentProps {
    /**
     * 按下登录按钮触发操作
     */
    triggerLogin: () => void
    /**
     * 按下进入按钮触发操作
     */
    triggerEnter: () => void
}

const mainContent: React.FC<IMainContentProps> = ({triggerLogin: triggerLogin, triggerEnter: triggerEnter}) => {
    const styles = useStyles().styles;
    const {userInfoDto, refresh} = useUserInfoStore();
    return (
        <div className={styles.container}>
            <div className="left">
                <h1>
                    {
                        userInfoDto.nickName ?
                        "欢迎：" + userInfoDto.nickName :
                            "欢迎，请登录"
                    }
                </h1>
                <p>简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介
                    简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介</p>
                <div className="buttons">
                    <Button type="primary" onClick={triggerEnter}>进入</Button>
                    {
                        localUtil.getToken() != null ?
                            <Button onClick={() => {
                                userApi.logout()
                                refresh()
                                window.messageApi.info("退出成功").then()
                            }}>退出</Button>:
                            <Button onClick={() => {
                                triggerLogin()
                            }}>登录/注册</Button>
                    }
                </div>
            </div>
            <div className="right">
                {/*todo 换LOGO*/}
                <img src="https://img.zcool.cn/community/01df8e586c662fa801219c776e3923.jpg@3000w_1l_0o_100sh.jpg"
                     alt="LOGO"/>
            </div>
        </div>
    )
}

export default mainContent;